<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家族荣誉榜 - 家族树</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                        gold: '#FBBF24',
                        silver: '#9CA3AF',
                        bronze: '#D97706'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
            .nav-link {
                @apply relative px-3 py-2 text-gray-700 hover:text-primary transition-colors duration-200;
            }
            .nav-link::after {
                @apply content-[''] absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-200;
            }
            .nav-link:hover::after {
                @apply w-full;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center">
                        <i class="fa fa-sitemap text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-dark">家族树</span>
                    </a>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex space-x-8">
                    <a href="index.html" class="nav-link">首页</a>
                    <a href="library.html" class="nav-link">家族资料库</a>
                    <a href="ai-access.html" class="nav-link">AI快速访问</a>
                    <a href="honors.html" class="nav-link text-primary border-b-2 border-primary">家族荣誉榜</a>
                    <a href="disgraces.html" class="nav-link">家族耻辱榜</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="menu-toggle" class="text-gray-700 hover:text-primary focus:outline-none">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md absolute w-full">
            <div class="px-4 py-3 space-y-2">
                <a href="index.html" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">首页</a>
                <a href="library.html" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">家族资料库</a>
                <a href="ai-access.html" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">AI快速访问</a>
                <a href="honors.html" class="block px-3 py-2 text-primary bg-blue-50 rounded-md">家族荣誉榜</a>
                <a href="disgraces.html" class="block px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md">家族耻辱榜</a>
            </div>
        </div>
    </header>

    <main class="flex-grow">
        <!-- 页面标题 -->
        <section class="bg-gradient-to-r from-gold to-yellow-500 text-white py-12">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <h1 class="text-3xl sm:text-4xl font-bold text-center mb-2 text-shadow">家族荣誉榜</h1>
                <p class="text-center opacity-90 max-w-2xl mx-auto">记录和展示家族成员的杰出成就与荣誉，传承家族荣耀。</p>
            </div>
        </section>

        <!-- 荣誉榜内容区域 -->
        <section class="py-12">
            <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                <!-- 搜索和筛选 -->
                <div class="mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
                    <div class="relative w-full sm:w-64">
                        <input type="text" placeholder="搜索荣誉..." class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent pl-10 text-sm">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium">全部荣誉</button>
                        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors">国家级</button>
                        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors">省级</button>
                        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors">市级</button>
                    </div>
                </div>

                <!-- 荣誉榜前三名 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                    <!-- 第二名 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transform md:translate-y-6">
                        <div class="bg-silver text-white py-2 text-center">
                            <h3 class="font-bold text-lg">第二名</h3>
                        </div>
                        <div class="p-6 text-center">
                            <div class="w-24 h-24 rounded-full bg-gray-200 mx-auto mb-4 flex items-center justify-center overflow-hidden">
                                <i class="fa fa-user text-4xl text-gray-400"></i>
                            </div>
                            <h4 class="text-xl font-bold mb-2" id="second-name">加载中...</h4>
                            <p class="text-gray-600 mb-3" id="second-achievement">加载中...</p>
                            <p class="text-sm text-gray-500" id="second-date">加载中...</p>
                        </div>
                    </div>

                    <!-- 第一名 -->
                    <div class="bg-white rounded-lg shadow-lg overflow-hidden card-hover border-4 border-gold z-10">
                        <div class="bg-gold text-white py-3 text-center">
                            <h3 class="font-bold text-xl">第一名</h3>
                        </div>
                        <div class="p-8 text-center">
                            <div class="w-32 h-32 rounded-full bg-gray-200 mx-auto mb-6 flex items-center justify-center overflow-hidden">
                                <i class="fa fa-user text-5xl text-gray-400"></i>
                            </div>
                            <h4 class="text-2xl font-bold mb-3" id="first-name">加载中...</h4>
                            <p class="text-gray-600 mb-4" id="first-achievement">加载中...</p>
                            <p class="text-sm text-gray-500" id="first-date">加载中...</p>
                        </div>
                    </div>

                    <!-- 第三名 -->
                    <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transform md:translate-y-12">
                        <div class="bg-bronze text-white py-2 text-center">
                            <h3 class="font-bold text-lg">第三名</h3>
                        </div>
                        <div class="p-6 text-center">
                            <div class="w-20 h-20 rounded-full bg-gray-200 mx-auto mb-4 flex items-center justify-center overflow-hidden">
                                <i class="fa fa-user text-3xl text-gray-400"></i>
                            </div>
                            <h4 class="text-xl font-bold mb-2" id="third-name">加载中...</h4>
                            <p class="text-gray-600 mb-3" id="third-achievement">加载中...</p>
                            <p class="text-sm text-gray-500" id="third-date">加载中...</p>
                        </div>
                    </div>
                </div>

                <!-- 荣誉列表 -->
                <div id="honors-list" class="space-y-4">
                    <!-- 加载状态 -->
                    <div class="col-span-full text-center py-12 bg-white rounded-lg shadow-sm">
                        <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
                        <p class="text-gray-600">加载家族荣誉中...</p>
                    </div>
                </div>

                <!-- 添加荣誉按钮 -->
                <div class="mt-12 text-center">
                    <button id="add-honor" class="px-6 py-3 bg-secondary text-white rounded-lg font-medium hover:bg-secondary/90 transition-colors flex items-center mx-auto">
                        <i class="fa fa-plus mr-2"></i> 添加新荣誉
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4 flex items-center">
                        <i class="fa fa-sitemap text-primary mr-2"></i> 家族树
                    </h3>
                    <p class="text-gray-400 text-sm">连接过去，现在和未来，构建完整的家族历史图谱。</p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">功能导航</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="index.html" class="hover:text-primary transition-colors">首页</a></li>
                        <li><a href="library.html" class="hover:text-primary transition-colors">家族资料库</a></li>
                        <li><a href="ai-access.html" class="hover:text-primary transition-colors">AI快速访问</a></li>
                        <li><a href="honors.html" class="hover:text-primary transition-colors">家族荣誉榜</a></li>
                        <li><a href="disgraces.html" class="hover:text-primary transition-colors">家族耻辱榜</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-primary transition-colors">使用指南</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">常见问题</a></li>
                        <li><a href="#" class="hover:text-primary transition-colors">联系支持</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li class="flex items-center"><i class="fa fa-envelope-o mr-2"></i> support@familytree.com</li>
                        <li class="flex items-center"><i class="fa fa-phone mr-2"></i> +86 123 4567 8910</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2023 家族树应用. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.add('shadow-sm');
            }
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // API交互功能 - 获取荣誉数据
        async function fetchHonorsData() {
            try {
                const response = await fetch('http://localhost:3000/api/honors');
                const honors = await response.json();
                console.log('荣誉数据:', honors);
                updateHonorsUI(honors);
            } catch (error) {
                console.error('获取荣誉数据失败:', error);
                const honorsList = document.getElementById('honors-list');
                honorsList.innerHTML = '<div class="col-span-full text-center py-12 bg-white rounded-lg shadow-sm"><p class="text-red-500">加载失败，请稍后重试</p></div>';
            }
        }

        function updateHonorsUI(honors) {
            if (honors.length === 0) {
                const honorsList = document.getElementById('honors-list');
                honorsList.innerHTML = '<div class="col-span-full text-center py-12 bg-white rounded-lg shadow-sm"><p class="text-gray-500">暂无家族荣誉记录</p></div>';
                return;
            }

            // 排序荣誉（假设按重要性排序）
            const sortedHonors = [...honors].sort((a, b) => b.id - a.id);

            // 更新前三名
            if (sortedHonors.length >= 1) {
                document.getElementById('first-name').textContent = sortedHonors[0].member_name || '未知成员';
                document.getElementById('first-achievement').textContent = sortedHonors[0].achievement;
                document.getElementById('first-date').textContent = new Date(sortedHonors[0].date).toLocaleDateString();
            }
            if (sortedHonors.length >= 2) {
                document.getElementById('second-name').textContent = sortedHonors[1].member_name || '未知成员';
                document.getElementById('second-achievement').textContent = sortedHonors[1].achievement;
                document.getElementById('second-date').textContent = new Date(sortedHonors[1].date).toLocaleDateString();
            }
            if (sortedHonors.length >= 3) {
                document.getElementById('third-name').textContent = sortedHonors[2].member_name || '未知成员';
                document.getElementById('third-achievement').textContent = sortedHonors[2].achievement;
                document.getElementById('third-date').textContent = new Date(sortedHonors[2].date).toLocaleDateString();
            }

            // 更新荣誉列表
            const honorsList = document.getElementById('honors-list');
            honorsList.innerHTML = '';

            // 从第四名开始显示
            const remainingHonors = sortedHonors.slice(3);
            remainingHonors.forEach((honor, index) => {
                const rank = index + 4;
                const honorItem = document.createElement('div');
                honorItem.className = 'bg-white rounded-lg shadow-sm p-4 flex flex-col sm:flex-row items-center sm:items-start gap-4 card-hover';
                honorItem.innerHTML = `
                    <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold shrink-0">
                        ${rank}
                    </div>
                    <div class="flex-grow">
                        <h4 class="font-bold text-lg">${honor.member_name || '未知成员'}</h4>
                        <p class="text-gray-600 mt-1">${honor.achievement}</p>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <span class="mr-4"><i class="fa fa-calendar-o mr-1"></i> ${new Date(honor.date).toLocaleDateString()}</span>
                            <span><i class="fa fa-trophy mr-1"></i> ${honor.level || '校级'}</span>
                        </div>
                    </div>
                `;
                honorsList.appendChild(honorItem);
            });
        }

        // 添加荣誉按钮点击事件
        document.getElementById('add-honor').addEventListener('click', function() {
            alert('添加荣誉功能即将上线，敬请期待！');
        });

        // 页面加载完成后获取数据
        document.addEventListener('DOMContentLoaded', fetchHonorsData);
    </script>
</body>
</html>